<include file="Public/header" /> 

<!--主窗体-->
<div class="container app">
	<!--左侧菜单-->
	<include file="Public/sidebar" /> 
	<!--左侧菜单//-->
	
	<!-- mainCon -->
	<div id="mainCon" class="mainCon">
		<h4>上传音乐</h4>
		<form class="form-horizontal" id="myform">
			<div class="form-group">
				<label for="title" class="col-sm-2 control-label">音乐名称</label>
				<div class="col-sm-5">
					<input type="text" class="form-control" name="title" id="title" value="" placeholder="音乐名称">
				</div>
			</div>
			
			<div class="form-group">
				<label class="col-sm-2 control-label">上传音乐</label>
				<div class="radio col-sm-5">
					<a class="btn btn-default" id="uploadify">上传音乐</a> <span style="margin-top:10px;float:left;color:#999">（建议上传1MB以内的音乐）</span>
				</div>
			</div>
			
			<div class="form-group">
				<label class="col-sm-2 control-label"></label>
				<div class="radio col-sm-5">
					<div id="showurl"></div>
					<div class="bk10"></div>
					<input type="hidden" name="mp3" id="upmp3" />
					<div style="display:none" id="playMp3"></div>
				</div>
			</div>
			
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<button type="submit" class="btn btn-default col-sm-2">保存</button>
				</div>
			</div>
		</form>
		
	</div>
	<!-- mainCon// -->
	
</div>
<!--主窗体//-->

<script src="__PUBLIC__/js/layer/layer.js"></script>
<script src="__PUBLIC__/js/validate/jquery.validate.min.js"></script>
<script src="__PUBLIC__/js/validate/messages_zh.js"></script>
<script src="__PUBLIC__/js/uploadify/jquery.uploadify.min.js"></script>
<script>
// 判断英文字符 
jQuery.validator.addMethod("isEnglish", function(value, element) {       
     return this.optional(element) || /^[A-Za-z0-9]+$/.test(value);       
}, "只能包含英文字符。"); 

$(function(){
	
	$("#myform").validate({
		rules: {
			title : {
				required : true
            }
		},
		messages: {
			
		},
		submitHandler : function(form){
			var ajaxUrl = "<{:U('Admin/Music/do_upMusic')}>";
			 $.post(ajaxUrl,$(form).serialize(),function(r){
    			if (r.error == 1){
    				layer.alert(r.errmsg,{icon: 2});
    			}else{
    				layer.alert(r.errmsg,{icon: 1},function(){
    					window.location.href = "<{:U('Admin/Music/musicList',array('k'=>8,'sk'=>0))}>";
    				});
    			}
    			return false;
    		});
        	return false
		}
	});
	
	// 文件上传
	$("#uploadify").uploadify({
	//	'formData': {"uptype":"cate"},
		'swf'           : '__PUBLIC__/js/uploadify/uploadify.swf',
		'uploader'      : "<{:U('Admin/Music/upMusicFile')}>",
		'fileTypeExts'	: '*.mp3;*.m4a',
		'width'			: 90,
		'buttonText' : '<a class="btn btn-default" id="uploadify">上传音乐</a>',
		'hideButton' : true,
		'multi': false,
		'fileObjName' : 'imgFile',
		'fileSizeLimit' : '2MB',
		'onUploadError' : function(back) {
			
		},
		'onUploadStart' : function(file) {

    	},
		'onUploadSuccess' : function(file,data,response) {
			var r = jQuery.parseJSON(data);
			if(r.error == 0){
				layer.msg('文件上传成功');
				var htm = '音乐文件链接地址：' + r.url;
				htm += '<div><a class="btn btn-default" onclick="playMp3();">播放音乐<span class="glyphicon glyphicon-step-forward"></span></a> <a class="btn btn-default" onclick="qxplayMp3();">停止播放<span class="glyphicon glyphicon-stop"></span></a> <a class="btn btn-default" onclick="removeMp3();">移除音乐</a></div>';
				$("#showurl").html(htm);
				$("#upmp3").val(r.url);
			}
		},
	
	});
	
});


//播放音乐
function playMp3(){
	var mp3 = $("#upmp3").val();
	if(mp3 == ''){
		alert('没有找到音乐文件！');
	}
	var htm = '<audio src="'+mp3+'" autoplay="autoplay" loop="loop"></audio>';
	$("#playMp3").html(htm);
}

//取消播放
function qxplayMp3(){
	$("#playMp3").html('');
}

//移除播放
function removeMp3(){
	$("#showurl").html('');
	$("#upmp3").val('');
}
</script>
<style>
.uploadify-queue{
	display:none;
}
</style>
<include file="Public/footer" /> 